<template>
  <div class="main">
  	<div class="content">
  		<img src="../assets/images/logo.png" class="logo" alt="">
  		<h3>感谢你使用智能回收柜</h3>
  		<p>绿色化、减量化、可循环化</p>

  	</div>
  	<div class="bottom">
  		<button class="btn" :class="[isConfirm ?  recoverBtnClass : confirmBtnClass]" @click="showDialog">{{message}}</button>
              <p v-show="isConfirm" class="text">你的奖励金已打到你的微信钱包,请查收！</p>
  	</div>
  </div>
</template>
<script>
  export default {
  	props:{
  		isConfirm:{
  			type:Boolean,
  		},
              message:{
                type:String,
                default:''
              }
  	},
    data(){
      return{
      		confirmBtnClass:'confirm',
      		recoverBtnClass:'recover',
      }
    },

    methods:{
    	showDialog(){
    		this.$emit('showDialog')
    	}
    }
  }
</script>
<style>

.text{
  color: #08409B;
  font-size: .26rem;
      position: absolute;
    width: 100%;
}
.main{
	display: flex;
      min-height: 100vh;
	text-align: center;
  flex-direction:column;
}
.content{
	padding-top: 1.3rem;
  flex:1;
}
.logo{
	width: 1.69rem;
	height: 1.69rem;
	margin-bottom: .35rem;
}
.content h3{
	color:#002054;
	font-size: .34rem;
}
.content p{
	color:#002053;
	font-size: .26rem;
	margin-top: .1rem;
}
.bottom{

	padding-bottom: 2.5rem;
	background:url(../assets/images/bg-main.png) 0 0 no-repeat;
	background-size: 100% 100%
}
.btn{
  background-color: #F7BE37;
  width: 2.6rem;
  line-height: .9rem;
background-position: .25rem center;
background-repeat: no-repeat;
  color:#fff;
  position: relative;
  font-size: .36rem;
  border-radius: 99px;
border: 0;
top: -.45rem;
text-indent: .4rem;
outline: none;
}
.btn.confirm{
	background-image: url(../assets/images/icon-1.png);
	background-size: .4rem .36rem;
}
.btn.recover{
	background-image: url(../assets/images/icon-2.png);
	background-size: .4rem .36rem;
}
</style>
